<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">-->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Circle Countdown</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        #score {
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .timer-box {
            position: absolute;
            top: 30px;
            left: 10px;
        }

        #game-board {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .ball {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            animation-duration: 5s;
            animation-iteration-count: 1;
            animation-timing-function: linear;
            animation-fill-mode:forwards;
            animation-name: drop;
            background-color: black;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
        }

        @keyframes drop {
            0% {
                transform: translate(0, -200px);
            }
            100% {
                transform: translate(0, 100vh);
            }
        }

    </style>
</head>
<body>
<div id="game-container">
    <div id="game-board">
        <span class="text1">123</span>
        <p class="article">123</p>
    </div>
</div>
<script src="./static/src/fastclick.js"></script>
<script>
    const gameBoard = document.getElementById('game-board');
    const ball = document.createElement('div');
    ball.classList.add('ball');
    ball.classList.add('ball-item');
    ball.style.backgroundImage = "url('https://www.psn.asia/static/src/image/avatar/avatars-" + String(randomInRange(1,11)).padStart(2,'0') + ".png')"
    gameBoard.appendChild(ball);
    console.log("ball = ",ball)
    setTimeout(() => {
        endGame()
    },2000)

    function endGame() {
        console.log('1= ',gameBoard.children[2])
        gameBoard.children[2].remove()
        console.log('2= ',gameBoard.children[2])
        gameBoard.children[2].remove()
        console.log('3= ',gameBoard.children[2])
    }


    function randomInRange(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }



</script>
</body>
</html>